<script lang="ts" setup>
import { ref, onActivated, useTemplateRef, nextTick } from 'vue';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useI18n } from 'vue-i18n';
import { dialog } from '@/settings/components/dialog';
import { useTypeList, TYPE_LINK, TYPE_TAG, TYPE_COLUMN, TYPE_PARENT } from './use';

const listing = ref<Record<string, any>[]>([]);
const loading = ref(false);
const search = ref();
const { success } = useNotification();
const { t } = useI18n();
const form = ref({
  barName: '',
});
const typeList = useTypeList();
const CURRENT_BASE = window.location.origin;
const tableRef = useTemplateRef('tableEl');

const refresh = async () => {
  const { isSuccess, data } = await $fetch('/admin/toolbar/queryToolbarList', {
    method: 'post',
    data: {
      barName: form.value.barName,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    listing.value = data;

    await nextTick();

    tableRef.value?.expandAll();
  }
}

const remove = async (id: string) => {
  const { isSuccess } = await $fetch('/admin/toolbar/deleteToolbarByBarId', {
    method: 'post',
    data: {
      barId: id,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
    search.value.refresh();
  }
};

// 打开弹窗新增标签
const add = async (parentId: string = '') => {
  const { button } = await dialog(() => import('./add-edit-window.vue'), {
    title: t('settings.view.toolbar.index.title1'),
    props: {
      parentId: String(parentId),
    },
  });

  if (button == 'ok') {
    search.value.refresh();
  }
}

// 打开弹窗编辑标签
const edit = async (id: string, parentId: string = '') => {
  const { button } = await dialog(() => import('./add-edit-window.vue'), {
    title: t('settings.view.toolbar.index.title2'),
    props: {
      id: String(id),
      parentId: String(parentId),
    },
  });

  if (button == 'ok') {
    search.value.refresh();
  }
};

onActivated(() => {
  search.value.refresh('reset');
});
</script>

<template>
  <OpenPageSection>
    <OpenSearchTable :data="listing" :loading="loading" @search="refresh" ref="search">
      <template #header>
        <AFormItem :label="$t('settings.view.toolbar.index.header1')">
          <AInput v-model="form.barName" allow-clear />
        </AFormItem>
      </template>

      <template #header-button>
        <AButton type="primary" @click="add()">{{ $t('settings.action.add') }}</AButton>
      </template>

      <template #table="{ bordered, loading: tableLoading }">
        <ATable
          :bordered="bordered"
          :loading="tableLoading"
          :data="listing"
          :pagination="false"
          row-key="barId"
          default-expand-all-rows
          ref="tableEl"
        >
          <template #columns>
            <ATableColumn :title="$t('settings.view.toolbar.index.column1')" data-index="barName" />
            <ATableColumn :title="$t('settings.view.toolbar.index.column8')" data-index="barNameEn" />

            <ATableColumn :title="$t('settings.view.toolbar.index.column6')">
              <template #cell="{ record }">
                {{ typeList[record.barType] }}
              </template>
            </ATableColumn>

            <ATableColumn :title="$t('settings.view.toolbar.index.column2')">
              <template #cell="{ record }">
                <template v-if="record.barType == TYPE_TAG">
                  {{ record.tagName }}
                  <ALink :href="`/tag/${record.labelId}`" target="_blank">{{ `${CURRENT_BASE}/tag/${record.labelId}` }}</ALink>
                </template>
                <template v-else-if="record.barType == TYPE_COLUMN">
                  <ALink :href="`/column/detail/${record.columnId}`" target="_blank">{{ `${CURRENT_BASE}/column/detail/${record.columnId}` }}</ALink>
                </template>
                <template v-else-if="record.barType == TYPE_LINK">
                  <ALink :href="record.jumpUrl" target="_blank">{{ record.jumpUrl }}</ALink>
                </template>
              </template>
            </ATableColumn>

            <ATableColumn :title="$t('settings.view.toolbar.index.column7')">
              <template #cell="{ record }">
                <template v-if="record.barType == TYPE_TAG">
                  {{ record.labelName }}
                </template>
                <template v-else-if="record.barType == TYPE_COLUMN">
                  {{ record.columnName }}
                </template>
              </template>
            </ATableColumn>

            <ATableColumn :title="$t('settings.view.toolbar.index.column3')" data-index="sort" />

            <ATableColumn :title="$t('settings.view.toolbar.index.column4')" :width="280">
              <template #cell="{ record }">
                <div class="button-actions">
                  <AButton size="small" @click="edit(record.barId, record.parentBarId || '')">
                    {{ $t('settings.action.edit') }}
                  </AButton>
                  <AButton size="small" @click="add(record.barId)" v-if="record.level == 1 && record.barType == TYPE_PARENT">
                    {{ $t('settings.view.toolbar.index.action1') }}
                  </AButton>
                  <AButton type="primary" status="danger" size="small" v-confirm @click="remove(record.barId)">
                    {{ $t('settings.action.delete') }}
                  </AButton>
                </div>
              </template>
            </ATableColumn>
          </template>
        </ATable>
      </template>
    </OpenSearchTable>
  </OpenPageSection>
</template>

<style lang="scss" scoped>
</style>
